<template>
	<modal type="top" v-model:visible="modalVisible" @close="handleClose">
        <view class="modal-value">我是弹窗里的内容{{$props.data}}</view>
         <view @click="choose">请选择</view>
    </modal>
</template>
 
<script>
import { ref, watch } from 'vue';
export default {
	props: {
		data: String,
		visible: Boolean
	},
	emits: ['change', 'update:visible'],
	setup(props, ctx) {
		const modalVisible = ref(false);
        //弹窗关闭
		const handleClose = () => {
			modalVisible.value = false;
			ctx.emit('update:visible', false);
		};
 
		const choose = () => {
			ctx.emit('change', { type: 1 });
		};
 
		watch(
			() => props.visible,
			val => {
				modalVisible.value = val;
			}
		);
		
		return { handleClose, modalVisible ,choose };
	}
};
</script>
 
<style>
.modal-value {
	padding: 20px;
	background-color: #fff;
}
</style>